<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Pricing_Cards</title>
  </head>
  <body>
    <!-- Global Container -->
    <div class="grid place-content-center min-h-screen bg-slate-800">
      <!-- Inner Container -->
      <div class="grid grid-flow-row md:grid-flow-col gap-4 text-white">
        <!-- Col 1 -->
        <!-- <div class="bg-slate-700 rounded-xl border-8 border-slate-700 hover:border-purple-600 duration-300"> -->
        <div class="bg-slate-700 rounded-xl">
          <!-- Upper Container -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">Basic</div>
            <h2 class="mt-10 text-center font-serif text-5xl">100GB</h2>
            <h3 class="mt-2 text-center">$1.99/Month</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border rounded-lg border-violet-600 text-center hover:border-violet-800 hover:bg-violet-800 duration-300"
              >
                Purchase
              </a>
            </div>
          </div>
          <!-- Border -->
          <div class="border-t border-slate-700"></div>
          <!-- Lower Container -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- List Container -->
            <div class="flex flex-col space-y-2">
              <!-- List Item 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">100 GB of storage</span>
              </div>
              <!-- List Item 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Option to add members</span>
              </div>
              <!-- List Item 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Extra member benefits</span>
              </div>
            </div>
          </div>
        </div>
        <!-- Col 2 -->
        <!-- <div class="bg-slate-700 rounded-xl border-8 border-slate-700 hover:border-purple-600 duration-300"> -->
        <div class="bg-violet-600 rounded-xl">
          <!-- Upper Container -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">Standard</div>
            <h2 class="mt-10 text-center font-serif text-5xl">200GB</h2>
            <h3 class="mt-2 text-center">$3.99/Month</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border rounded-lg border-violet-600 text-center bg-violet-600 hover:border-violet-800 hover:bg-violet-800 duration-300"
              >
                Purchase
              </a>
            </div>
          </div>
          <!-- Border -->
          <div class="border-t border-slate-700"></div>
          <!-- Lower Container -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- List Container -->
            <div class="flex flex-col space-y-2">
              <!-- List Item 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">200 GB of storage</span>
              </div>
              <!-- List Item 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Option to add members</span>
              </div>
              <!-- List Item 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Extra member benefits</span>
              </div>
            </div>
          </div>
        </div>
        <!-- Col 3 -->
        <!-- <div class="bg-slate-700 rounded-xl border-8 border-slate-700 hover:border-purple-600 duration-300"> -->
        <div class="bg-slate-700 rounded-xl">
          <!-- Upper Container -->
          <div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
            <div class="text-center uppercase">Premium</div>
            <h2 class="mt-10 text-center font-serif text-5xl">2 TB</h2>
            <h3 class="mt-2 text-center">$8.99/Month</h3>
            <div class="flex justify-center">
              <a
                href="#"
                class="inline-block px-10 py-3 my-6 border rounded-lg border-violet-600 text-center hover:border-violet-800 hover:bg-violet-800 duration-300"
              >
                Purchase
              </a>
            </div>
          </div>
          <!-- Border -->
          <div class="border-t border-slate-700"></div>
          <!-- Lower Container -->
          <div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
            <!-- List Container -->
            <div class="flex flex-col space-y-2">
              <!-- List Item 1 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">2 TB of storage</span>
              </div>
              <!-- List Item 2 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Option to add members</span>
              </div>
              <!-- List Item 3 -->
              <div class="flex justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-5 h-5"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M5 12l5 5l10 -10" />
                </svg>
                <span class="text-sm ml-1">Extra member benefits</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
